<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修饰字体</title>
    <link rel="stylesheet" href="font.css">
    <style>
        .item {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            /* color: 文字颜色 */
            color: rgb(4, 75, 42);
            /* font-size: 文字大小默认16px */
            /* font-weight 100-900 lighter[100] normal[400] bold[700] bolder[900]*/
            font-size: 18px;
            font-weight: 100;
            background-color: cadetblue;
            /* font-family: 'JetBrains Mono Medium'; */
            /* font-style 文本显示模式 normal 正常  italic 文本斜体显示 oblique 文本倾斜体 */
            font-style: normal;
            /* text-decoration 文本装饰 none 没有 underline 下划线 overline 上划线 */
            text-decoration: blink;
            /* text-align : 文本的位置 center居中left居左 right居右 inherit 继承父元素的该属性值 */
            text-align: center;
            line-height: 200px;
            /* text-indent 首行缩进 */
            text-indent: 36px;
            /* text-shadow 字体阴影 -3px 代表向右偏移量 -4px 向下偏移量 5px 模糊程度 #fa2c2c 阴影颜色  */
            text-shadow: -3px -4px 5px #fa2c2c;
        }

        .span {
            font-style: italic;
        }

        span {
            font-weight: lighter;
        }

        a {
            /* text-decoration: none; */
            /* text-decoration: ; */
        }

        img {
            width: 200px;
            /* vertical-align 设置垂直方向的对齐方式 middle 行元素和文字的中线对齐 */
            /* top/text-top 和文字的顶部对齐 */
            /* bottom/text-bottom 和文字的底部对齐 */
            /* baseline 和文字的基线对齐 */
            vertical-align: baseline;
        }

        .img-box {
            width: 400px;
            height: 400px;
            margin: 0 auto;
        }

        .super {
            /* 上标 */
            vertical-align: super;
        }

        .sub {
            /* 下标 */
            vertical-align: sub;
        }

        .info {
            width: 200px;
            height: 80px;
            margin: 0 auto;
            background-color: aquamarine;
            /* 盒子溢出部分隐藏 */
            overflow: hidden;
            white-space: nowrap; /* 不换行 */
            /* 文本溢出部分显示成省略号 */
            text-overflow: ellipsis;
        }

        .shadow {
            border: 2px solid skyblue;
            width: 400px;
            height: 400px;
            background-color: bisque;
            margin: 0 auto;
            /* box-shadow 设置盒子的引用 水平方向[右] 上下方向[下] 模糊程度 阴影颜色 */
            box-shadow: -10px -10px 10px grey;
            opacity: 0.5;
            /* box-shadow: 10px 10px 10px grey; */
        }

        .ul li {
            /* list-style 设置无序列表前面的圆点类型 none 不显示  */
            /* list-style: "\1F44D"; */
            list-style-type: none;
            list-style-image: url("../images/1_.png");
            list-style-position: inside;
            /* list-style: disc; */
            /* list-style-position: inside; */
        }

    </style>

</head>

<body>
    <!-- <div class="item">
        原创团队：云创动力·开发喵kaifamiao
        <span class="span">开发喵kaifamiao</span>
    </div> -->

    <!-- <div class="img-box">
        <p>这是一点上标<span class="super">super</span></p>
        <p>这是一点下标<span class="sub">sub</span></p>

        <img src="../images/002.png" alt="">
        这是一张图片
    </div> -->

    <!-- <div class="info">我是开发喵，开发喵开发喵开发喵</div> -->

    <div class="shadow"></div>
    <ul type="circle" class="ul">
        <li>JDBC</li>
        <li>MYSQL</li>
        <li>JAVA</li>
    </ul>

</body>

</html>